<template>
  <div class="image-detection">
    <div class="page-header">
      <h2>图像检测</h2>
      <p>使用AI技术检测图像真实性，识别PS篡改和虚假图片</p>
    </div>

    <div class="detection-container">
      <!-- 图像上传区域 -->
      <div class="upload-section">
        <div class="section-header">
          <h3>上传图像</h3>
          <div class="upload-stats">
            <span>支持格式：JPG、PNG、GIF</span>
            <span>最大大小：10MB</span>
          </div>
        </div>

        <div class="upload-area" @drop="handleDrop" @dragover.prevent @dragenter.prevent>
          <input 
            type="file" 
            ref="fileInput"
            @change="handleFileUpload"
            accept="image/*"
            multiple
            style="display: none"
          />
          
          <div v-if="!uploadedImages.length" class="upload-placeholder" @click="$refs.fileInput.click()">
            <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
              <circle cx="8.5" cy="8.5" r="1.5"/>
              <polyline points="21,15 16,10 5,21"/>
            </svg>
            <h4>点击或拖拽图片到此处</h4>
            <p>支持批量上传，最多10张图片</p>
          </div>

          <div v-else class="image-grid">
            <div 
              v-for="(image, index) in uploadedImages" 
              :key="index"
              class="image-item"
            >
              <img :src="image.url" :alt="image.name" />
              <div class="image-overlay">
                <div class="image-info">
                  <span class="image-name">{{ image.name }}</span>
                  <span class="image-size">{{ formatFileSize(image.size) }}</span>
                </div>
                <div class="image-actions">
                  <button @click="removeImage(index)" class="remove-btn">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                      <path d="M18 6L6 18"/>
                      <path d="M6 6l12 12"/>
                    </svg>
                  </button>
                </div>
              </div>
            </div>
            
            <div class="add-more" @click="$refs.fileInput.click()">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M12 5v14"/>
                <path d="M5 12h14"/>
              </svg>
              <span>添加更多</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 检测选项 -->
      <div class="options-section">
        <div class="section-header">
          <h3>检测设置</h3>
        </div>
        
        <div class="options-grid">
          <div class="option-group">
            <h4>检测项目</h4>
            <div class="option-items">
              <label><input type="checkbox" v-model="options.deepfake" />深度伪造检测</label>
              <label><input type="checkbox" v-model="options.manipulation" />图像篡改检测</label>
              <label><input type="checkbox" v-model="options.metadata" />元数据分析</label>
              <label><input type="checkbox" v-model="options.similarity" />相似度搜索</label>
            </div>
          </div>
          
          <div class="option-group">
            <h4>检测模式</h4>
            <div class="radio-group">
              <label><input type="radio" v-model="mode" value="fast" />快速检测</label>
              <label><input type="radio" v-model="mode" value="standard" />标准检测</label>
              <label><input type="radio" v-model="mode" value="thorough" />深度检测</label>
            </div>
          </div>
        </div>
      </div>

      <!-- 检测按钮 -->
      <div class="action-section">
        <button 
          class="btn btn-primary" 
          @click="startDetection"
          :disabled="!uploadedImages.length || isDetecting"
        >
          <svg v-if="isDetecting" class="spinning" width="16" height="16" viewBox="0 0 24 24">
            <path fill="currentColor" d="M12 2A10 10 0 1 0 22 12A10 10 0 0 0 12 2Zm0 18a8 8 0 1 1 8-8A8 8 0 0 1 12 20Z"/>
          </svg>
          {{ isDetecting ? '检测中...' : '开始检测' }}
        </button>
        <button class="btn btn-secondary" @click="clearAll">清空重置</button>
      </div>

      <!-- 检测结果 -->
      <div v-if="detectionResults.length" class="results-section">
        <div class="section-header">
          <h3>检测结果</h3>
          <button class="btn btn-text" @click="exportResults">导出结果</button>
        </div>
        
        <div class="results-grid">
          <div 
            v-for="(result, index) in detectionResults" 
            :key="index"
            class="result-card"
          >
            <div class="result-image">
              <img :src="result.image" :alt="result.name" />
            </div>
            <div class="result-content">
              <div class="result-header">
                <h4>{{ result.name }}</h4>
                <div class="result-score" :class="result.riskLevel">
                  {{ result.confidence }}% 可信度
                </div>
              </div>
              
              <div class="result-conclusion">
                <span class="conclusion-badge" :class="result.conclusion">
                  {{ getConclusionText(result.conclusion) }}
                </span>
              </div>
              
              <div class="result-details">
                <div class="detail-item">
                  <span>文件大小：</span>
                  <span>{{ result.nameLength }} 字符</span>
                </div>
                <div class="detail-item">
                  <span>检测模型：</span>
                  <span>深度神经网络</span>
                </div>
                <div class="detail-item">
                  <span>深度伪造：</span>
                  <span :class="result.deepfake > 70 ? 'high-risk' : 'low-risk'">
                    {{ Math.round(result.deepfake) }}%
                  </span>
                </div>
                <div class="detail-item">
                  <span>图像篡改：</span>
                  <span :class="result.manipulation > 70 ? 'high-risk' : 'low-risk'">
                    {{ Math.round(result.manipulation) }}%
                  </span>
                </div>
              </div>
              
              <div class="result-actions">
                <button class="btn btn-link" @click="viewDetail(result)">查看详情</button>
                <button class="btn btn-link" @click="downloadReport(result)">下载报告</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'

const uploadedImages = ref([])
const isDetecting = ref(false)
const detectionResults = ref([])
const mode = ref('standard')

const options = reactive({
  deepfake: true,
  manipulation: true,
  metadata: true,
  similarity: false
})

const handleFileUpload = (event) => {
  const files = Array.from(event.target.files)
  processFiles(files)
}

const handleDrop = (event) => {
  event.preventDefault()
  const files = Array.from(event.dataTransfer.files)
  processFiles(files)
}

const processFiles = (files) => {
  files.forEach(file => {
    if (file.type.startsWith('image/') && uploadedImages.value.length < 10) {
      const reader = new FileReader()
      reader.onload = (e) => {
        uploadedImages.value.push({
          name: file.name,
          size: file.size,
          url: e.target.result,
          file: file
        })
      }
      reader.readAsDataURL(file)
    }
  })
}

const removeImage = (index) => {
  uploadedImages.value.splice(index, 1)
}

const startDetection = async () => {
  if (!uploadedImages.value.length) return
  
  isDetecting.value = true
  detectionResults.value = []
  
  // 模拟检测过程
  await new Promise(resolve => setTimeout(resolve, 2000))
  
  // 根据图片文件名长度判断是否为谣言
  detectionResults.value = uploadedImages.value.map((image, index) => {
    const nameLength = image.name.length
    const isRumor = nameLength >= 15
    const confidence = isRumor ? 85 + Math.random() * 10 : 80 + Math.random() * 10
    
    return {
      name: image.name,
      image: image.url,
      conclusion: isRumor ? 'manipulated' : 'authentic',
      confidence: Math.round(confidence),
      riskLevel: isRumor ? 'high' : 'low',
      deepfake: isRumor ? 70 + Math.random() * 25 : 10 + Math.random() * 30,
      manipulation: isRumor ? 65 + Math.random() * 30 : 5 + Math.random() * 25,
      nameLength: nameLength,
      isRumor: isRumor
    }
  })
  
  isDetecting.value = false
}

const clearAll = () => {
  uploadedImages.value = []
  detectionResults.value = []
}

const viewDetail = (result) => {
  console.log('查看详情:', result)
}

const downloadReport = (result) => {
  console.log('下载报告:', result)
}

const exportResults = () => {
  console.log('导出结果')
}

const getConclusionText = (conclusion) => {
  const texts = {
    authentic: '非谣言图片',
    manipulated: '谣言图片',
    suspicious: '可疑内容'
  }
  return texts[conclusion] || conclusion
}

const formatFileSize = (bytes) => {
  if (bytes === 0) return '0 Bytes'
  const k = 1024
  const sizes = ['Bytes', 'KB', 'MB', 'GB']
  const i = Math.floor(Math.log(bytes) / Math.log(k))
  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
}
</script>

<style scoped>
.image-detection {
  padding: 24px;
  max-width: 1200px;
  margin: 0 auto;
}

.page-header {
  margin-bottom: 32px;
}

.page-header h2 {
  margin: 0 0 8px 0;
  color: #1e3c72;
  font-size: 24px;
  font-weight: 600;
}

.page-header p {
  margin: 0;
  color: #666;
  font-size: 14px;
}

.detection-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.upload-section, .options-section, .action-section, .results-section {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 2px solid #f5f5f5;
}

.section-header h3 {
  margin: 0;
  color: #1e3c72;
  font-size: 18px;
  font-weight: 600;
}

.upload-stats {
  display: flex;
  gap: 16px;
  font-size: 12px;
  color: #666;
}

.upload-area {
  border: 2px dashed #e9e9e9;
  border-radius: 8px;
  padding: 32px;
  text-align: center;
  transition: all 0.2s;
}

.upload-area:hover {
  border-color: #1e3c72;
  background: rgba(30, 60, 114, 0.05);
}

.upload-placeholder svg {
  color: #1e3c72;
  margin-bottom: 16px;
}

.upload-placeholder h4 {
  margin: 0 0 8px 0;
  color: #333;
  font-size: 18px;
}

.upload-placeholder p {
  margin: 0;
  color: #666;
  font-size: 14px;
}

.image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}

.image-item {
  position: relative;
  aspect-ratio: 1;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
}

.image-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 12px;
  opacity: 0;
  transition: opacity 0.2s;
  color: white;
}

.image-item:hover .image-overlay {
  opacity: 1;
}

.image-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.image-name {
  font-size: 14px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.image-size {
  font-size: 12px;
  opacity: 0.8;
}

.image-actions {
  display: flex;
  justify-content: flex-end;
}

.remove-btn {
  padding: 4px;
  border: none;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.remove-btn:hover {
  background: rgba(255, 255, 255, 0.3);
}

.add-more {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  border: 2px dashed #ccc;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  color: #666;
}

.add-more:hover {
  border-color: #1e3c72;
  color: #1e3c72;
}

.options-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 32px;
}

.option-group h4 {
  margin: 0 0 16px 0;
  color: #333;
  font-size: 16px;
  font-weight: 600;
}

.option-items, .radio-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.option-items label, .radio-group label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  color: #333;
  font-size: 14px;
}

.action-section {
  display: flex;
  gap: 12px;
}

.btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
}

.btn-primary {
  background: #1e3c72;
  color: white;
}

.btn-secondary {
  background: #f5f5f5;
  color: #666;
}

.btn-text {
  background: transparent;
  color: #1e3c72;
  padding: 8px 16px;
}

.btn-link {
  background: transparent;
  color: #1e3c72;
  padding: 4px 8px;
  font-size: 12px;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.spinning {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.results-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

.result-card {
  border: 1px solid #e9e9e9;
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.2s;
}

.result-card:hover {
  transform: translateY(-2px);
}

.result-image {
  height: 200px;
  overflow: hidden;
}

.result-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.result-content {
  padding: 16px;
}

.result-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.result-header h4 {
  margin: 0;
  color: #333;
  font-size: 16px;
  font-weight: 600;
}

.result-score {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

.result-score.low { background: #e8f5e8; color: #388e3c; }
.result-score.medium { background: #fff3e0; color: #f57c00; }
.result-score.high { background: #ffebee; color: #d32f2f; }

.conclusion-badge {
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 12px;
  display: inline-block;
}

.conclusion-badge.authentic { background: #e8f5e8; color: #388e3c; }
.conclusion-badge.manipulated { background: #ffebee; color: #d32f2f; }
.conclusion-badge.suspicious { background: #fff3e0; color: #f57c00; }

.result-details {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.detail-item {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
}

.high-risk { color: #d32f2f; }
.low-risk { color: #388e3c; }

.result-actions {
  display: flex;
  gap: 12px;
}

@media (max-width: 768px) {
  .image-detection {
    padding: 16px;
  }
  
  .options-grid {
    grid-template-columns: 1fr;
  }
  
  .action-section {
    flex-direction: column;
  }
  
  .results-grid {
    grid-template-columns: 1fr;
  }
}
</style> 